<template>
  <!--行业达人 -->
  <div class="hydr">
    <!-- 筛选栏 -->
    <div class="query">
      <my-search-input
        :value.sync="searchValue"
        placeholder="链接搜索"
        @search="search"
      ></my-search-input>
      <my-button type="add" bgc="#E4ECFF" fontColor="#649AF9" @click="handleClickAdd"
        >添加</my-button
      >
      <div v-if="userInfo" class="desc">
        当前套餐最多可添加关键词
        <span v-if="userInfo.taocaninfo"
          >DY: {{ userInfo.taocaninfo.dyrivallimit }}</span
        >
        <span v-if="userInfo.taocaninfo"
          >KS: {{ userInfo.taocaninfo.ksrivallimit }}</span
        >
        <span v-if="userInfo.taocaninfo">
          XHS: {{ userInfo.taocaninfo.xhsrivallimit }}</span
        >
      </div>
    </div>
    <!-- 主体 -->
    <div class="container">
      <!-- 操作栏 -->
      <div class="action">
        <div class="list-refresh">
          <my-dropdown-list
            :list="tableColumn"
            @change="changeTableColumn"
          ></my-dropdown-list>
          <div class="iconfont icon" @click="refresh">&#xe74a;</div>
        </div>
      </div>
      <!-- 表格 -->
      <div class="table">
        <el-table
          v-if="tableHeight"
          border
          :data="dataSource"
          :height="tableHeight"
          row-class-name="row-class-name"
          header-row-class-name="header-row-class-name"
          style="width: 100%"
        >
          <!-- <el-table-column type="selection" width="100"> </el-table-column> -->
          <el-table-column
            v-if="tableColumn.keyword.show"
            prop="keyword"
            label="对手链接"
            min-width="300"
          ></el-table-column>
          <el-table-column
            v-if="tableColumn.dispensenum.show"
            prop="dispensenum"
            label="商机数"
            width="150"
          >
            <template slot-scope="scope">
              <el-popover
                v-if="!scope.row.dispensenum"
                placement="top-start"
                title="提示"
                width="200"
                trigger="hover"
                content="还没有抓取线索或该视频的线索已通过关键词抓取过!"
              >
                <div slot="reference" style="cursor: pointer">
                  {{ scope.row.dispensenum }}
                </div>
              </el-popover>
              <el-tooltip
                v-else
                effect="light"
                content="点击查看详情"
                placement="top-start"
              >
                <div style="cursor: pointer" @click="toXsPage(scope.row)">
                  {{ scope.row.dispensenum }}
                </div>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column
            v-if="tableColumn.type.show"
            prop="type"
            label="平台"
            width="100"
          >
            <template slot-scope="scope">{{
              handleTableColVal(scope.row.type)
            }}</template>
          </el-table-column>
          <el-table-column
            v-if="tableColumn.status.show"
            prop="status"
            label="状态"
            width="150"
          >
            <template slot-scope="scope">
              <div v-if="scope.row.status_new">
                <el-tooltip class="item" effect="light" :content="scope.row.auditnote" placement="top">
                  <div>{{ scope.row.status_new }}</div>
                </el-tooltip>
              </div>
              <my-switch
                v-else
                :value.sync="scope.row.status"
                @changeSwitchValue="changeSwitchValue(scope.row)"
              ></my-switch>
            </template>
          </el-table-column>
          <el-table-column
            v-if="tableColumn.createtime.show"
            prop="createtime"
            label="修改时间"
            width="200"
          ></el-table-column>

          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <div
                class="iconfont table-del-icon"
                @click="handleClickDel(scope.row)"
              >
                &#xe650;
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="page">
        <el-pagination
          background
          :current-page="currentPage"
          :page-size="pageSize"
          :page-sizes="[15,25,30]"
          layout="total,sizes, prev, pager, next, jumper"
          :total="total"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        >
        </el-pagination>
      </div>
    </div>
    <!-- ---------------- 弹窗 ---------------- -->
    <!-- 排名词 -->
    <el-dialog
      :visible.sync="dialogVisible"
      :show-close="false"
      width="50%"
      class="rank-words"
    >
      <div class="header">
        <div class="title">排名词设置</div>
        <div class="iconfont icon" @click="dialogVisible = false">&#xe608;</div>
      </div>
      <div class="body">
        <div class="list-block">
          <div class="label">
            <div class="text">地区</div>
            <my-button bgc="#ee1e4f">选择地区</my-button>
          </div>
          <div class="list">
            <div v-for="(item, index) in 11" :key="index" class="list-item">
              <div class="text">地名</div>
              <div class="iconfont icon">&#xe620;</div>
            </div>
          </div>
          <div class="add">
            <input type="text" />
            <my-button bgc="#ee0100">添加</my-button>
          </div>
        </div>
      </div>
      <div class="footer">
        <my-button bgc="#f7d264_#f79844" @click="dialogVisible = false"
          >关闭</my-button
        >
      </div>
    </el-dialog>
    <!-- 确认弹窗 -->
    <my-dialog-confirm
      :show.sync="showConfirm"
      @confirm="confirmDelete"
    ></my-dialog-confirm>
  </div>
</template>

<script>
import myButton from "@/components/myButton.vue";
import myForm from "@/components/myForm.vue";
import mySwitch from "@/components/mySwitch.vue";
import myInput from "@/components/myInput.vue";
import myDropdownList from "@/components/myDropdownList.vue";
import mySearchInput from "@/components/mySearchInput.vue";
import myDialogConfirm from "@/components/myDialogConfirm.vue";
// import data from "@/data/data.js";
export default {
  components: {
    myButton,
    myForm,
    mySwitch,
    myInput,
    myDropdownList,
    mySearchInput,
    myDialogConfirm,
  },
  data() {
    return {
      showConfirm: false,
      dialogVisible: false,
      deleteRow: {},
      placeQuery: {
        title: {
          type: "input",
          label: "名称",
          value: "",
          placeholder: "请输入名称",
        },
        user: {
          type: "input",
          label: "城市",
          value: "",
          placeholder: "请输入城市",
        },
        search_place: {
          type: "button",
          bgc: "#ee1e4f",
          btnText: "搜索",
        },
      }, // 地点弹窗搜索条件
      searchValue: "",
      type: "0",
      dataSource: [],
      tableColumn: {
        keyword: {
          show: true,
          text: "对手链接",
        },
        dispensenum: {
          show: true,
          text: "商机数",
        },
        type: {
          show: true,
          text: "平台",
        },
        status: {
          show: true,
          text: "状态",
        },
        createtime: {
          show: true,
          text: "修改时间",
        },
      },
      tableHeight: 0,
      currentPage: 1,
      pageSize: 15,
      total: 0,
      timer: null,
      userInfo: null,
    };
  },
  mounted() {
    this.tableHeight = document.querySelector(".table").offsetHeight - 2;
    window.onresize = () => {
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.tableHeight = document.querySelector(".table").offsetHeight - 2;
      }, 500);
    };
    this.getData();
    this.userInfo = JSON.parse(window.localStorage.getItem("person"));
  },
  beforeDestroy() {
    window.onresize = null;
  },
  methods: {
    //列表
    async getData() {
      let res = await this.$api.hydr_getData({
        page: this.currentPage,
        limit: this.pageSize,
        filter: {
          keyword: this.searchValue,
        },
        op: { keyword: "%*%" },
      });
      this.dataSource = res.data;
      this.total = res.count;
    },

    //修改状态
    async changeSwitchValue(row) {
      await this.$api.hydr_changeStatus({
        id: row.id,
        field: "status",
        value: row.status ? 0 : 1,
      });
      this.getData();
    },
    // 添加
    async handleClickAdd() {
      let res = await this.$api.hydr_add({
        keyword: this.searchValue,
        qt_json: "20210728",
      });
      if(res.code != 0){
        this.$message(res.msg);
      }
      this.getData();
    },
    // 删除
    handleClickDel(row) {
      this.showConfirm = true;
      this.deleteRow = row;
    },
    async confirmDelete() {
      await this.$api.hydr_delete({
        id: this.deleteRow.id,
      });
      this.showConfirm = false;
      this.getData();
    },
    // 控制表格显示哪几列
    changeTableColumn(key) {
      this.tableColumn[key].show = !this.tableColumn[key].show;
    },
    // 页码跳转
    handleCurrentChange(page) {
      this.currentPage = page;
      this.getData();
    },
     handleSizeChange(val) {
        this.pageSize=val;
        this.getData();

    },
    //搜索
    search() {
      this.currentPage = 1;
      this.dataSource = [];
      this.getData();
    },
    // 刷新
    refresh() {
      this.currentPage = 1;
      this.dataSource = [];
      this.getData();
    },
    // 商机数详情
    toXsPage(row) {
      this.$router.push({ path: "/hydr/xs", query: { keyword: row.keyword } });
    },
    handleTableColVal(val) {
      let type = [
        { name: "DY", value: "1" },
        { name: "KS", value: "11" },
        { name: "KS", value: "12" },
        { name: "XHS", value: "21" },
      ];
      let result = type.find((v) => v.value == val);
      return result.name;
    },
  },
};
</script>

<style lang="less" scoped>
.hydr {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 112px 0 0px 0;
  box-sizing: border-box;
}
.query {
  position: absolute;
  top: 52px;
  display: flex;
  align-items: center;
  width: 100%;
  height: 52px;
  padding: 11px 45px;
  box-sizing: border-box;
  background-color: #fff;
  .button {
    margin-left: 12px;
    width: 75px;
    height: 30px;
    font-size: 13px;
    font-weight: bold;
  }
  .desc {
    color: #777;
    font-size: 14px;
    margin-left: 12px;
    span {
      margin-right: 10px;
    }
  }
}
.container {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 45px 0 80px 0;
  box-sizing: border-box;
  background-color: #fff;
  .action {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    height: 45px;
    padding: 0 40px;
    box-sizing: border-box;
    .list-refresh {
      position: absolute;
      bottom: 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 60px;
      .icon {
        font-size: 17px;
        color: rgba(212, 212, 212);
        cursor: pointer;
        user-select: none;
      }
    }
  }
  .table {
    width: 100%;
    height: 100%;
    padding: 0 34px;
    box-sizing: border-box;
    /deep/ .header-row-class-name {
      height: 65px;
      th {
        background-color: #f0f4ff;
      }
      .cell {
        height: 100%;
        color: #333;
        text-align: center;
      }
    }
    /deep/ .row-class-name {
      height: 50px;
      .cell {
        display: flex;
        justify-content: center;
        text-align: center;
        .slot-row {
          display: flex;
          align-items: center;
          justify-content: center;
          .icon-block {
            display: flex;
            align-items: center;
            height: 18px;
            padding: 0 8px;
            border-right: 2px solid #c7c7c7;
            .icon {
              color: #333;
              font-size: 20px !important;
            }
            .number {
              color: #333;
              font-size: 16px;
            }
          }
          :last-child {
            border-right: 0;
          }
        }
        .button {
          width: 60px;
          height: 24px;
        }
      }
    }
    /deep/ .el-table__body-wrapper {
      &::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
        height: 10px;
      }
      &::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 5px;
        // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: rgb(230, 228, 228);
      }
      &::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
        border-radius: 5px;
        background: #fff;
      }
    }
  }
}
.page {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 80px;
  /deep/ .active {
    background-color: #387CF7 !important;
  }
}

// 弹窗样式
.el-dialog__wrapper {
  /deep/ .el-dialog__header {
    padding: 0;
  }
  /deep/ .el-dialog__body {
    padding: 0px 0px;
    .header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      font-size: 18px;
      font-weight: bold;
      padding: 18px 28px;
      box-sizing: border-box;
      border-bottom: 1px solid #d7d7d7;
      .text {
        color: #000;
      }
      .icon {
        color: rgba(178, 178, 178);
        cursor: pointer;
        user-select: none;
      }
    }

    .footer {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px 0 40px 10px;
      .button {
        width: 120px;
        margin-right: 20px;
      }
    }
  }
  /deep/ .el-dialog__footer {
    padding: 0;
  }
}
.rank-words {
  .body {
    display: flex;
    justify-content: space-between;
    width: 100%;
    // height: 600px;
    padding: 0 60px 20px 60px;
    box-sizing: border-box;
    .list-block {
      width: 30%;
      .label {
        display: flex;
        align-items: center;
        height: 70px;
        .text {
          font-size: 16px;
          margin-right: 10px;
        }
        .button {
          height: 30px;
        }
      }
      .add {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 60px;
        padding: 15px 0;
        box-sizing: border-box;
        input {
          width: 150px;
          height: 30px;
          outline: none;
          border: 1px solid #e7e7e7;
          border-radius: 5px;
          padding: 0 10px;
          box-sizing: border-box;
        }
        .button {
          height: 30px;
        }
      }
      .list {
        width: 100%;
        height: 400px;
        border: 1px solid #e7e7e7;
        overflow: auto;
        &::-webkit-scrollbar {
          /*滚动条整体样式*/
          width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
          height: 10px;
        }
        &::-webkit-scrollbar-thumb {
          /*滚动条里面小方块*/
          border-radius: 5px;
          // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
          background: rgb(230, 228, 228);
        }
        &::-webkit-scrollbar-track {
          /*滚动条里面轨道*/
          // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
          border-radius: 5px;
          background: #fff;
        }
        .list-item {
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 100%;
          height: 40px;
          padding: 0 20px;
          box-sizing: border-box;
          .text {
            color: #333;
            font-size: 14px;
            margin-right: 20px;
          }
          .icon {
            color: #ccc;
            font-size: 22px;
            user-select: none;
            cursor: pointer;
          }
        }
      }
    }
  }
}
.confirm {
  /deep/ .el-dialog__header {
    font-size: 18px;
    padding: 14px 28px;
    border-bottom: 1px solid #d7d7d7;
    .el-dialog__close {
      &::before {
        font-size: 20px;
        font-weight: bold;
      }
    }
  }
  .body {
    width: 100%;
    height: 60px;
    line-height: 60px;
    text-align: center;
    color: #333;
    font-size: 18px;
  }
}
</style>